<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" wrapClassName="modal-add"
    destroyOnClose>
    <BasicForm @register="registerForm"> </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, h, reactive, watch } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicForm, useForm } from '@/components/Form'
// import { addGroupGapFormSchema } from './data'
import { addRecordPrice, updateRecordPrice } from '@/api/sys/energyUnitPrice'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { FormSchema } from '@/components/Table'
import { cloneDeep } from 'lodash-es'

defineOptions({ name: 'ModalAddTime' })

const emit = defineEmits(['success', 'register'])

const isUpdate = ref(false)
const rowId = ref()
const groupIndex = ref()
const timeIndex = ref()
const format = 'HH:mm'
const addGroupGapFormSchema: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '时段名',
    componentProps: {
      readonly: true,
      disabled: true,
    },
  },
  {
    field: 'startTime',
    label: '开始时间',
    component: 'DatePicker',
    rules: [
      {
        required: true,
        // message: '开始时间不得晚于结束时间',
        // validator: (rule, value, callback) => {
        //   const { endTime } = getFieldsValue()

        //   return new Promise((resolve, reject) => {
        //     if (endTime && dayjs(value).isAfter(dayjs(endTime))) {
        //       reject(new Error(rule.message))
        //     } else {
        //       resolve()
        //     }
        //   })
        // },
      },
    ],
    componentProps: {
      picker: 'time',
      format,
      showTime: {
        showSecond: false,
      },
    },
  },
  {
    field: 'endTime',
    label: '结束时间',
    component: 'DatePicker',
    rules: [
      {
        required: true,
        // validator: (rule, value, callback) => {
        //   const { startTime } = getFieldsValue()
        //   return new Promise((resolve, reject) => {
        //     if (startTime && dayjs(value).isBefore(dayjs(startTime))) {
        //       reject(new Error(rule.message))
        //     } else {
        //       resolve()
        //     }
        //   })
        // },
        // message: '结束时间不得早于开始时间',
      },
    ],
    componentProps: {
      picker: 'time',
      format,
      showTime: {
        showSecond: false,
      },
    },
  },
]
const [
  registerForm,
  { setFieldsValue, getFieldsValue, validateFields, updateSchema, resetFields, validate },
] = useForm({
  labelWidth: 140,
  baseColProps: { span: 24 },
  schemas: addGroupGapFormSchema,
  showActionButtonGroup: false,
  actionColOptions: {
    span: 23,
  },
})

const timeName = () => {
  const index = unref(timeIndex) + 1
  return `时段${index}`
}

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  resetFields()
  setModalProps({ confirmLoading: false })
  isUpdate.value = !!data?.isUpdate
  groupIndex.value = data.groupIndex
  timeIndex.value = data.timeIndex
  setFieldsValue({
    name: timeName(),
  })
  if (unref(isUpdate)) {
    setFieldsValue({
      startTime: dayjs(data.data.startTime, format),
      endTime: dayjs(data.data.endTime, format),
    })
  }
})

const getTitle = computed(() => {
  const flag = unref(isUpdate)
  const name = timeName()
  return !unref(isUpdate) ? `新增${name}` : `修改${name}`
})

async function handleSubmit() {
  try {
    const values = await validate()
    const index = unref(timeIndex)
    const data = {
      startTime: dayjs(values.startTime).format(format) + ':00',
      endTime: dayjs(values.endTime).format(format) + ':59',
    }
    setModalProps({ confirmLoading: true })
    message.success(isUpdate.value ? '修改成功' : '添加成功')
    closeModal()
    emit('success', {
      isUpdate: unref(isUpdate),
      values: data,
      groupIndex: unref(groupIndex),
      timeIndex: index,
    })
  } finally {
    setModalProps({ confirmLoading: false })
  }
}
</script>
